<template>
  <section class="m-shop-floor-item">
    <!-- adv1f -->
    <div class="floor-item adv1f" v-if="ofloor.floorType == 'adv1f'" @click="onToLink(ofloor)">
      <div class="img-box">
        <img v-lazy="ofloor.floorPhoto">
      </div>
      <p class="tit" v-if="ofloor.floorName">{{ofloor.floorName}}</p>
    </div>

    <!-- adv2f -->
    <div class="floor-item adv2f" v-if="ofloor.floorType == 'adv2f'" @click="onToLink(ofloor)">
      <div class="img-box">
        <img v-lazy="ofloor.floorPhoto">
      </div>
      <p class="tit" v-if="ofloor.floorName">{{ofloor.floorName}}</p>
    </div>

    <!-- adv3f -->
    <div class="floor-item adv3f" v-if="ofloor.floorType == 'adv3f'" @click="onToLink(ofloor)">
      <div class="img-box">
        <img v-lazy="ofloor.floorPhoto">
      </div>
      <p class="tit" v-if="ofloor.floorName">{{ofloor.floorName}}</p>
    </div>

    <!-- adv4f -->
    <div class="floor-item adv4f" v-if="ofloor.floorType == 'adv4f'" @click="onToLink(ofloor)">
      <div class="img-box">
        <img v-lazy="ofloor.floorPhoto">
      </div>
      <p class="tit" v-if="ofloor.floorName">{{ofloor.floorName}}</p>
    </div>

    <!-- 商品列表 adv5f -->
    <yd-list theme="1" v-if="ofloor.floorType == 'adv5f'">
      <p class="tit" v-if="ofloor.floorName">{{ofloor.floorName}}</p>
      <yd-list-item v-for="(goods, index) in ofloor.goodsInfoList" :key="index" @click.native="$router.push(`/goods/${goods.goodsId}`)">
        <img slot="img" v-lazy="goods.goodsMainPhoto">
        <span slot="title">{{goods.goods_name}}</span>
        <yd-list-other slot="other">
          <div>
            <span class="yd-price"><em>¥</em>{{(goods.store_price || 0) | currency}}</span>
          </div>
          <div class="scale">月销{{goods.monthlySales || 0}}件</div>
        </yd-list-other>
      </yd-list-item>
    </yd-list>
  </section>
</template>

<script>
  export default {
    props: {
      ofloor: [Object]
    },
    methods: {
      onToLink(ofloor) {
        if (ofloor.linkedProductType == '0') { // 商品
          this.$router.push(`/goods/${ofloor.goodsInfoList[0].goodsId}`)
        } else if (ofloor.linkedProductType == '1') { // url链接
          window.location.href = ofloor.linkedProductUrl
        }
      }
    }
  }
</script>

<style lang="scss">
  .m-shop-floor-item {
    .floor-item {
      padding: .3rem;
      margin-bottom: .2rem;
      background: #fff;
      .img-box {
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tit {
        padding-top: .3rem;
        font-size: .26rem;
        color: #666;
      }
      &.adv1f .img-box {
        height: 3.4rem;
      }
      &.adv2f .img-box {
        height: 3rem;
      }
      &.adv3f .img-box {
        height: 6.4rem;
      }
      &.adv4f .img-box {
        height: 3.4rem;
      }
    }
    .yd-list-theme1 {
      background: #fff;
      padding: 0 .15rem;
      margin-bottom: .2rem;
      .tit {
        padding-top: .2rem;
        padding-left: .2rem;
      }
      .yd-list-item {
        padding: 0 .15rem;
      }
    }
  }
</style>